<template>
    <div class="box" @mouseleave="mouseleave">
        <v-chart :option="option" autoresize class="charts" @mouseover="mouseover"></v-chart>
        <div class="tooltip" v-show="showTooltip" :style="{'top':top,'left':left}">
            <div class="title">{{showItem.name}}</div>
            <div class="manyi">满意：{{showItem.my}}人/{{showItem.my_b}}%</div>
            <!-- <div class="yiban">一般：{{showItem.yb}}人/{{showItem.yb_b}}%</div> -->
            <div class="bumanyi">不满意：{{showItem.bmy}}人/{{showItem.bmy_b}}%</div>
        </div>
    </div>
</template>

<script>
import * as echart from 'echarts'
export default {
    props: ["dataS", "lv"],
    watch: {
        dataS: {
            deep: true,
            immediate: true,
            handler() {
                this.option.radar.indicator = this.dataS.name
                this.nameArr = this.dataS.name.map(item => item.name)
                this.option.series[0].data[0].value = this.dataS.rt_num
                // this.option.series[0].data[1].value = this.dataS.yb_num
                this.option.series[0].data[1].value = this.dataS.brt_num

            }
        }
    },
    data() {
        return {

            option: {
                legend: {
                    itemHeight: 3,
                    top: "0 ",
                    right: 0,
                    data: [{
                        name: '满意',
                        itemStyle: {
                            color: "#01BDA3"
                        },
                        textStyle: {
                            lineHeight: 14,
                            rich: {
                                a: {
                                    verticalAlign: 'middle',
                                },
                            },
                            padding: [0, 0, -4, 0],  //[上、右、下、左]
                        },
                    },
                    // {
                    //     name: '一般',
                    //     itemStyle: {
                    //         color: "#F3B023"
                    //     },
                    //     textStyle: {
                    //         lineHeight: 14,
                    //         rich: {
                    //             a: {
                    //                 verticalAlign: 'middle',
                    //             },
                    //         },
                    //         padding: [0, 0, -4, 0],  //[上、右、下、左]
                    //     },
                    // },
                    {
                        name: '不满意',
                        itemStyle: {
                            color: "#FF5620"
                        },
                        textStyle: {
                            lineHeight: 14,
                            rich: {
                                a: {
                                    verticalAlign: 'middle',
                                },
                            },
                            padding: [0, 0, -4, 0],  //[上、右、下、左]
                        },
                    }],
                },
                radar: {
                    indicator: [
                        // { name: '收费员服务' },
                        // { name: 'ETC相关' },
                        // { name: '高速公路通行费' },
                        // { name: '交通拥堵' },
                        // { name: '“高速映山红”品牌宣贯' },
                        // { name: '发卡机' },
                        // { name: '收费设备' },
                        // { name: '道路施工' },
                        // { name: '路面状况' },
                        // { name: '公路标志' },
                        // { name: '防护设施' },
                        // { name: '应急救援' },
                        // { name: '客服服务' },
                        // { name: '路况信息' }
                    ],
                    triggerEvent: true,
                },
                series: [
                    {
                        symbol: "none",
                        type: 'radar',
                        tooltip: {
                            show: false
                        },

                        data: [
                            {
                                // value: [4200, 3000, 20000, 35000, 50000, 18000, 4200, 3000, 20000, 35000, 50000, 18000, 18000],
                                value: [],
                                name: '满意',
                                areaStyle: {
                                    color: "rgba(1,189,163,.3)"
                                }
                            },
                            // {
                            //     // value: [5000, 14000, 28000, 26000, 42000, 21000, 4200, 3000, 20000, 35000, 50000, 18000, 18000],
                            //     value: [],
                            //     name: '一般',
                            //     areaStyle: {
                            //         color: "rgba(243,176,35,.3)"
                            //     }
                            // },
                            {
                                // value: [5000, 14000, 28000, 26000, 42000, 21000, 4200, 3000, 20000, 35000, 50000, 18000, 18000],
                                value: [],
                                name: '不满意',
                                areaStyle: {
                                    color: "rgba(255,86,32,.3)"
                                }
                            }
                        ]
                    }
                ]
            },
            top: 0,
            left: 0,
            showTooltip: false,
            nameArr: [],
            showItem: {}
        }
    },
    methods: {
        mouseover(e) {
            if (this.nameArr.indexOf(e.name) != -1) {
                this.top = e.event.offsetY + "px"
                this.left = e.event.offsetX + "px"
                this.showTooltip = true
                this.lv.forEach(item => {
                    if (item.name == e.name) {
                        this.showItem = item
                    }
                })
            } else {
                this.showTooltip = false
                this.showItem = {}
            }
        },
        mouseleave() {
            this.showTooltip = false
        }
    },
    mounted() {
        this.option.radar.indicator = this.dataS.name
        this.nameArr = this.dataS.name.map(item => item.name)
        this.option.series[0].data[0].value = this.dataS.rt_num
        // this.option.series[0].data[1].value = this.dataS.yb_num
        this.option.series[0].data[1].value = this.dataS.brt_num
    }
}
</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    position: relative;
}

.charts {
    width: 100%;
    height: 100%;
}
.tooltip {
    position: absolute;
    background: #ffffff;
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    padding: 1.5rem 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(-50%);
}
.title {
    font-size: 1.4rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #222222;
    margin-bottom: 1.5rem;
}
.manyi {
    font-size: 1.4rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #01bda3;
    margin-bottom: 1rem;
}
.yiban {
    font-size: 1.4rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #f3b023;
    margin-bottom: 1rem;
}
.bumanyi {
    font-size: 1.4rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ff5620;
}
</style>